<template>
  <div class="workshopManagement dis-f jc-sb">
    <div class="flex-1 pr-12">
      <div class="dis-f jc-sb">
        <con-box class="w-530 h-450" title="生产管理">
          <div class="dis-f fd-c jc-c h-100p">
            <div class="h-92 dis-f jc-sb pl-26 mb-40">
              <div class="w-92 h-92">
                <img class="w-100p h-100p" src="@/assets/images/yyjx_icon_cl.png" alt="" />
              </div>
              <div class="flex-1 dis-f jc-sb fz-14 c-fff pl-30">
                <div class="product-item h-92 po-r">
                  <p class="lh-40px">当日实际产量(包)</p>
                  <div class="fw-700 fz-20 font-num">{{ production.activeDayOut }}</div>
                  <div class="po-a t-20 r-30 w-1 h-34 bgc-1a2f3d"></div>
                </div>
                <div class="product-item po-r">
                  <p class="lh-40px">月产量(包)</p>
                  <div class="fw-700 fz-20 font-num">{{ production.activeMonthlyOut }}</div>
                </div>
              </div>
            </div>
            <div class="h-150 po-r">
              <div class="po-a cur-p w-48 h-26 dis-f ai-c r-6 t--20 fz-14">
                <base-select v-model="selectedDate" :list="productManageList" />
              </div>
              <div class="quality-management">
                <div class="percentage">
                  <div class="value">
                    <img src="@/assets/images/zhcc_icon_yshl.png" alt="" class="rotate" />
                    <span>{{ toMoney(throughRate) }}</span>
                    <span class="unit">%</span>
                  </div>
                  <title-item title="直通率" />
                </div>
                <data-list class="ml-20 mt-20" :list="qualityList" backgroundColor="green" />
              </div>
            </div>
          </div>
        </con-box>
        <div class="h-450 w-470">
          <con-box class="w-100p h-450" title="设备管理">
            <div class="dis-f jc-sb h-100p fd-c">
              <div class="h-190">
                <div class="h-92 dis-f jc-sb pl-10">
                  <div class="pic po-r w-89 h-78 t-14">
                    <img src="@/assets/images/zhcc_icon_cp.png" alt="" class="w-100p h-100p" />
                    <div class="po-a fz-16 t-14 font-num w-100p ta-c font-num scale">
                      {{ sbObj.device && sbObj.device.setsinuse }}%
                    </div>
                    <p class="c-fff fz-14 ta-c">开机率</p>
                  </div>

                  <div class="flex-1 dis-f jc-sb fz-14 c-fff pl-30 pt-30">
                    <div class="w-128 h-92 po-r">
                      <p class="lh-40px">全部设备数量</p>
                      <div class="fw-700 fz-20 font-num">{{ sbObj.device && sbObj.device.devicesAll }}</div>
                      <!-- <div class="po-a t-20 r-10 l-20 w-1 h-34 bgc-1a2f3d"></div> -->
                    </div>
                    <div class="w-106 po-r">
                      <p class="lh-40px">正常设备数量</p>
                      <div class="fw-700 fz-20 font-num">{{ sbObj.device && sbObj.device.devicesNormal }}</div>
                      <!-- <div class="po-a t-20 r-10 w-1 h-34 bgc-1a2f3d"></div> -->
                    </div>
                    <!-- <div class="w-112 h-92">
                    <p class="lh-40px">离线设备数量</p>
                    <div class="fw-700 fz-20 font-num">{{ sbObj.device && sbObj.device.devicesOffline }}</div>
                  </div> -->
                  </div>
                </div>
                <div class="h-92 dis-f">
                  <div class="w-50p bar-progress-small dis-f jc-sb pt-20 pl-20">
                    <div class="w-70">
                      <bar-progress :progress="sbObj.device ? sbObj.device.startupProgress : 0" title="" />
                    </div>
                    <div class="w-120 pt-20">
                      <div class="fz-14 c-fff">开线进度</div>
                      <div class="w-116 h-6 bgc-183A57 por mt-20">
                        <div
                          :style="{ width: sbObj.device ? sbObj.device.startupProgress + '%' : 0 }"
                          class="h-100p bgline"
                        ></div>
                      </div>
                    </div>
                  </div>
                  <div class="w-50p">
                    <base-echarts :options="sbPieOptions" />
                  </div>
                </div>
              </div>
              <div class="flex-1">
                <base-echarts :options="sbOptions" />
              </div>
            </div>
          </con-box>
          <!-- <con-box class="h-450 " title="安全" >
            <div class="h-100p pt-30">

            <div class="pr-20 pl-20 dis-f jc-sb ai_c ">
              <div class="w-86 h-86">
                <img src="@/assets/images/yqzjl_icon_hd.png" alt="" class="w-100p h-100p" />
              </div>
              <div class="w-280 mt-10 h-51 bg-text pl-40 va-m dis-f ai-c">
                安全生产连续天数
                <span class="fz-24 fw-700 c-fff ml-40 mr-4">{{ safeObj.runningDays }}</span>天
              </div>
            </div>
            </div>
          </con-box> -->
          <!-- <con-box class="h-256 mt-10" title="能源管理">
            <div class="h-92 dis-f jc-sb pl-40 energy">
              <div class="text w-14 pt-20">车间</div>
              <div class="w-91 h-93 ml-10 flex-s-0">
                <img class="w_100p h_100p" src="@/assets/images/cjgl_icon_cj.png" alt="" />
              </div>
              <div class="flex-1 dis-f jc-sb fz-14 c-fff">
                <div class="h-92 po-r item">
                  <p class="lh-40px">水耗</p>
                  <div class="fw-700 font-num fz-20 font-num">{{ energyObj.workshopWaterConsumption }}</div>
                </div>
                <div class="po-r item">
                  <p class="lh-40px">电耗</p>
                  <div class="fw-700 font-num fz-20 font-num">{{ energyObj.workshopPowerConsumption }}</div>
                </div>
                <div class="h-92 item">
                  <p class="lh-40px">气耗</p>
                  <div class="fw-700 font-num fz-20 font-num">{{ energyObj.workshopStreamConsumption }}</div>
                </div>
              </div>
            </div>
            <div class="h-92 dis-f jc-sb pl-40 energy">
              <div class="text w-14 pt-20">生产线</div>
              <div class="w-91 h-93 ml-10 flex-s-0">
                <img class="w_100p h_100p" src="@/assets/images/cjgl_icon_cj.png" alt="" />
              </div>
              <div class="flex-1 dis-f jc-sb fz-14 c-fff">
                <div class="h-92 po-r item">
                  <p class="lh-40px">水耗</p>
                  <div class="fw-700 font-num fz-20 font-num">{{ energyObj.lineWaterConsumption }}</div>
                </div>
                <div class="po-r item">
                  <p class="lh-40px">电耗</p>
                  <div class="fw-700 font-num fz-20 font-num">{{ energyObj.linePowerConsumption }}</div>
                </div>
                <div class="h-92 item">
                  <p class="lh-40px">气耗</p>
                  <div class="fw-700 font-num fz-20 font-num">{{ energyObj.lineStreamConsumption }}</div>
                </div>
              </div>
            </div>
          </con-box> -->
        </div>
        <con-box class="w-360 h-450" title="人效">
          <div class="item pl-30">
            <div class="fz-18 c-fff">
          <img src="@/assets/images/rect.png" alt="" class="sm-icon" />
              人员数量</div>
            <div class="con">
              <div class="dis-f jc-sb">
                <div class="w-81 mt-20">
                  <div class="pic po-r w-81 h-71">
                    <img src="@/assets/images/zhcc_icon_cp.png" alt="" class="w-100p h-100p" />
                    <div class="po-a fz-16 t-14 font-num scale w-100p ta-c ">{{ personObj.totalNumber }}</div>
                  </div>
                  <p class="c-fff fz-14 ta-c">总人数</p>
                </div>
                <div class="flex-1">
                  <data-list-no-line :list="aqList" />
                </div>
              </div>
            </div>
          </div>
          <div class="item pl-30">
            <div class="fz-18 c-fff">
              <img src="@/assets/images/rect.png" alt="" class="sm-icon" />
              千包总工时</div>
              <div class="con dis-f jc-sb">
              <div class="pic w-96 po-r">
                <div class="po-a fz-24 t-14 fw-700 c-fff font-style-italic scale w-100p ta-c">
                  {{ personObj.totalhours || 0 }}KB/H
                </div>
                <img src="@/assets/images/sy_icon_mmcz.png" alt="" class="w_100p h_100p" />
                <p class="fz-12 c-B9BCC1 mt-6 ta-c">总工时</p>
              </div>
              <div class="pic w-96 po-r">
                <div class="po-a fz-24 t-14 fw-700 c-fff font-style-italic scale w-100p ta-c">
                  {{ 0.03 }}%
                </div>
                <img src="@/assets/images/sy_icon_mmcz.png" alt="" class="w_100p h_100p" />
                <p class="fz-12 c-B9BCC1 mt-6 ta-c">同比</p>
              </div>
              <div class="pic w-96 po-r">
                <div class="po-a fz-24 t-14 fw-700 c-fff font-style-italic scale w-100p ta-c">
                  {{ 0.11 }}%
                </div>
                <img src="@/assets/images/sy_icon_mmcz.png" alt="" class="w_100p h_100p" />
                <p class="fz-12 c-B9BCC1 mt-6 ta-c">环比</p>
              </div>
            </div>
          </div>
        </con-box>
      </div>
      <div class="mt-10 dis-f jc-sb">
        <con-box class="flex-1 h-450" title="品控管理">
          <div class="pr-34 pt-16 dis-f jc-sb">
            <div class="w-400">
              <div class="h-170">
                <div class="dis-f pt-16 pl-10 pr-20 jc-sb">
                  <div class="item w-138">
                    <div class="bg-item w-128 h-40 dis-f ai-c jc-c fz-16 c-fff">客诉件数</div>
                    <div class="mt-20 w-138 h-102 po-r">
                      <img src="@/assets/images/aqsc_icon_szdk.png" alt="" class="w-100p h-100p" />
                      <div class="po-a text-linear t-20 w-100p ta-c fz-16 c-70A3EF scale">
                        <span class="fz-24">{{ qualityObj.quality && qualityObj.quality.numbeComplaints }}</span>次
                      </div>
                    </div>
                  </div>
                  <div class="item w-138">
                    <div class="bg-item w-128 h-40 dis-f ai-c jc-c fz-16 c-fff">客诉率</div>
                    <div class="mt-20 w-138 h-102 po-r">
                      <img src="@/assets/images/aqsc_icon_szdk.png" alt="" class="w-100p h-100p" />
                      <div class="po-a text-linear t-20 w-100p ta-c fz-16 c-70A3EF scale">
                        <span class="fz-24">{{ qualityObj.quality && qualityObj.quality.grantComplaintRate }}</span>%
                      </div>
                    </div>
                  </div>
                  <div class="item w-138">
                    <div class="bg-item w-128 h-40 dis-f ai-c jc-c fz-16 c-fff">产线不良品数</div>
                    <div class="mt-20 w-138 h-102 po-r">
                      <img src="@/assets/images/aqsc_icon_szdk.png" alt="" class="w-100p h-100p" />
                      <div class="po-a text-linear t-20 w-100p ta-c fz-16 c-70A3EF scale">
                        <span class="fz-24">{{ qualityObj.quality && qualityObj.quality.processConformityRate }}</span>件
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="h-184">
                <base-echarts :options="pkPieOptions" />
              </div>
            </div>
            <div class="w-445">
              <div class="pic w-96 m-0-auto po-r t--20">
                <div class="po-a fz-24 t-14 fw-700 c-fff font-style-italic scale w-100p ta-c">
                  {{ 1.06 }}PPK
                </div>
                <img src="@/assets/images/sy_icon_mmcz.png" alt="" class="w_100p h_100p" />
                <p class="fz-12 c-B9BCC1 mt-6 ta-c">产线制程能力</p>
              </div>
              <div class="quality-management bg-fh h-170 po-r t-10">
                <div class="percentage">
                  <div class="icon">
                    <img src="@/assets/images/rect_3.png" alt="" class="img-item" />
                    <img src="@/assets/images/aqsc_icon_fqclzb.png" alt="" class="rotate-fast" />
                  </div>
                  <title-item title="工艺符合率" />
                </div>
                <data-list :list="gyList" class="ml-20" margin="mb-10" />
              </div>
            </div>
            <div class="w-418">
              <div class="h-250 po-r t-70">
                <base-echarts :options="pkOptions" />
              </div>
            </div>
          </div>
        </con-box>
      </div>
    </div>
    <div class="w-468">
      <con-box class="h-450" title="能耗">
        <div class="fz-18 c-fff h-39 mt-20 pl-40">
          <img src="@/assets/images/rect.png" alt="" class="sm-icon" />
          每吨能耗
        </div>
        <div class="item-con dis-f jc-sb ta-c p-0-40px">
          <div class="item">
            <div class="pic w-65 h-49 po-r">
              <img class="w-100p h-100p" src="@/assets/images/cj_icon_zq.png" alt="" />
              <img src="@/assets/images/arrow.png" alt="" class="arrow" />
            </div>
            <p class="fz-14 c-C3E1FF">蒸汽</p>
            <div class="fz-14 mt-10 c-00E4FF">{{ nhObj.steamUsed }}吨/吨</div>
          </div>
          <div class="item">
            <div class="pic w-65 h-49 po-r">
              <img class="w-100p h-100p" src="@/assets/images/cj_icon_zq.png" alt="" />
              <img src="@/assets/images/arrow.png" alt="" class="arrow center-arr" />
            </div>
            <p class="fz-14 c-C3E1FF">电</p>
            <div class="fz-14 mt-10 c-00E4FF">{{ nhObj.elecUsed }}度/吨</div>
          </div>
          <div class="item">
            <div class="pic w-65 h-49 po-r">
              <img class="w-100p h-100p" src="@/assets/images/cj_icon_zq.png" alt="" />
              <img src="@/assets/images/arrow.png" alt="" class="arrow right-arr" />
            </div>
            <p class="fz-14 c-C3E1FF">水</p>
            <div class="fz-14 mt-10 c-00E4FF">{{ nhObj.waterUsed }}吨/吨</div>
          </div>
        </div>
        <div class="fz-18 c-fff h-39 mt-20 pl-40">
          <img src="@/assets/images/rect.png" alt="" class="sm-icon" />
          千箱能耗
        </div>
        <div class="item-con dis-f jc-sb ta-c p-0-40px">
          <div class="item">
            <div class="pic w-65 h-49 po-r">
              <img class="w-100p h-100p" src="@/assets/images/cj_icon_zq.png" alt="" />
              <img src="@/assets/images/arrow.png" alt="" class="arrow" />
            </div>
            <p class="fz-14 c-C3E1FF">蒸汽</p>
            <div class="fz-14 mt-10 c-00E4FF">{{ nhObj.steamUsedThousand }}吨/千包</div>
          </div>
          <div class="item">
            <div class="pic w-65 h-49 po-r">
              <img class="w-100p h-100p" src="@/assets/images/cj_icon_zq.png" alt="" />
              <img src="@/assets/images/arrow.png" alt="" class="arrow center-arr" />
            </div>
            <p class="fz-14 c-C3E1FF">电</p>
            <div class="fz-14 mt-10 c-00E4FF">{{ nhObj.elecUsedThousand }}度/千包</div>
          </div>
          <div class="item">
            <div class="pic w-65 h-49 po-r">
              <img class="w-100p h-100p" src="@/assets/images/cj_icon_zq.png" alt="" />
              <img src="@/assets/images/arrow.png" alt="" class="arrow right-arr" />
            </div>
            <p class="fz-14 c-C3E1FF">水</p>
            <div class="fz-14 mt-10 c-00E4FF">{{ nhObj.waterUsedThousand }}吨/千包</div>
          </div>
        </div>
      </con-box>
      <con-box class="h-450 mt-10" title="蒸汽、电、水趋势图">
        <base-echarts :options="steamOptions" />
      </con-box>
    </div>
  </div>
</template>

<script>
// iui
import {
  workshopProduction,
  workshopPersonnel,
  workshopQuality,
  workshopWorkday,
  workshopDevice,
  workshopEnergy,
  workshopEnergyUsed,
  workshopTendency,
} from "@/api/apis";
import TitleItem from "@/components/TitleItem.vue";
import DataList from "@/components/DataList.vue";
import DataListNoLine from "@/components/DataListNoLine.vue";
import mixins from "@/mixins/refresh";

const barDate = [];

// -----------------合规性 start---------------------------
var data = [
  {
    name: "首检合格率",
    value: 0,
  },
  {
    name: "品评合格率",
    value: 0,
  },
  {
    name: "成品抽检合格率",
    value: 0,
  },
  // {
  //   name: "准客诉率",
  //   value: 0,
  // },
];
var titleArr = [],
  seriesArr = [];
var sCenter,
  TitleXy = {};
var colors = [
  ["#46C97D", "#1b2d2f"],
  ["#DC8439", "#1b2d2f"],
  ["#18F8F9", "#1b2d2f"],
  ["#6885D9", "#1b2d2f"],
  ["#FFF189", "#1b2d2f"],
];
data.forEach(function (item, index) {
  sCenter = [index * 30 + 24 + "%", "40%"];
  TitleXy = {
    left: index * 30 + 24 + "%",
    top: "70%",
  };
  titleArr.push({
    text: item.name,
    left: TitleXy.left,
    top: TitleXy.top,
    textAlign: "center",
    textStyle: {
      fontSize: nowSize(14),
      color: "#FFFFFF",
      textAlign: "center",
    },
  });
  seriesArr.push({
    name: item.name,
    type: "pie",
    clockWise: true,
    roundCap: true,
    barWidth: 60,
    radius: [30, 36],
    itemStyle: {
      normal: {
        color: colors[index][0],
        shadowColor: colors[index][0],
        shadowBlur: 0,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
      },
    },
    hoverAnimation: false,
    center: sCenter,
    data: [
      {
        value: item.value,
        label: {
          normal: {
            formatter: function (params) {
              return params.value + "%";
            },
            position: "center",
            show: true,
            textStyle: {
              fontSize: nowSize(14),
              fontWeight: "bold",
              fontStyle: "italic",
              color: "#ffffff",
            },
          },
        },
      },
      {
        value: 100 - item.value,
        name: "invisible",
        tooltip: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: colors[index][1],
          },
          emphasis: {
            color: colors[index][1],
          },
        },
      },
    ],
  });
});

// -----------------合规性 end----------

import BaseEcharts from "@/components/BaseEcharts.vue";
import ConBox from "@/components/ConBox.vue";
import { nowSize } from "@/utils/nowSize";
import * as echarts from "echarts";
import BarProgress from "@/components/BarProgress.vue";
import BaseSelect from "@/components/BaseSelect.vue";

import { getSevenDays, getRangeRandom, getRangeRandomFloor } from "@/utils/tools"
export default {
  name: "WorkshopManagement",
  components: {
    ConBox,
    BaseEcharts,
    BarProgress,
    TitleItem,
    DataList,
    DataListNoLine,
    BaseSelect,
  },
  mixins: [mixins],
  data() {
    return {
      // fui
      productManageList: [
        { label: "日", value: "day" },
        { label: "月", value: "month" },
      ],
      selectedDate: "day",
      sbObj: {},
      nhObj: {},
      qualityObj: {},
      personObj: {},
      energyObj: {},
      safeObj: {},
      production: {},
      quality: {},
      query: {},
      sbPieOptions: {
        title: [
          {
            text: "时间稼动率",
            left: "16%",
            top: "74%",
            textAlign: "center",
            textStyle: {
              fontSize: nowSize(12),
              color: "#FFFFFF",
              textAlign: "center",
            },
          },
          {
            text: "性能稼动率",
            left: "46%",
            top: "74%",
            textAlign: "center",
            textStyle: {
              fontSize: nowSize(12),
              color: "#FFFFFF",
              textAlign: "center",
            },
          },
          {
            text: "故障稼动率",
            left: "76%",
            top: "74%",
            textAlign: "center",
            textStyle: {
              fontSize: nowSize(12),
              color: "#FFFFFF",
              textAlign: "center",
            },
          },
        ],
        series: [
          {
            name: "时间稼动率",
            type: "pie",
            clockWise: true,
            roundCap: true,
            barWidth: 60,
            radius: [20, 24],
            itemStyle: {
              normal: {
                color: "#16A5F4",
                shadowColor: "#16A5F4",
                shadowBlur: 0,
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            hoverAnimation: false,
            center: ["20%", "40%"],
            data: [
              {
                value: 0,
                label: {
                  normal: {
                    formatter: function (params) {
                      return params.value + "%";
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: nowSize(14),
                      fontWeight: "bold",
                      fontStyle: "italic",
                      color: "#ffffff",
                    },
                  },
                },
              },
              {
                value: 100 - 40,
                name: "invisible",
                tooltip: {
                  show: false,
                },
                itemStyle: {
                  normal: {
                    color: "#1b2d2f",
                  },
                  emphasis: {
                    color: "#1b2d2f",
                  },
                },
              },
            ],
          },
          {
            name: "性能稼动率",
            type: "pie",
            clockWise: true,
            roundCap: true,
            barWidth: 60,
            radius: [20, 24],
            itemStyle: {
              normal: {
                color: "#FFB508",
                shadowColor: "#FFB508",
                shadowBlur: 0,
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            hoverAnimation: false,
            center: ["49%", "40%"],
            data: [
              {
                value: 0,
                label: {
                  normal: {
                    formatter: function (params) {
                      return params.value + "%";
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: nowSize(14),
                      fontWeight: "bold",
                      fontStyle: "italic",
                      color: "#ffffff",
                    },
                  },
                },
              },
              {
                value: 100 - 40,
                name: "invisible",
                tooltip: {
                  show: false,
                },
                itemStyle: {
                  normal: {
                    color: "#1b2d2f",
                  },
                  emphasis: {
                    color: "#1b2d2f",
                  },
                },
              },
            ],
          },
          {
            name: "故障稼动率",
            type: "pie",
            clockWise: true,
            roundCap: true,
            barWidth: 60,
            radius: [20, 24],
            itemStyle: {
              normal: {
                color: "#00E4FF",
                shadowColor: "#00E4FF",
                shadowBlur: 0,
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            hoverAnimation: false,
            center: ["78%", "40%"],
            data: [
              {
                value: 0,
                label: {
                  normal: {
                    formatter: function (params) {
                      return params.value + "%";
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: nowSize(14),
                      fontWeight: "bold",
                      fontStyle: "italic",
                      color: "#ffffff",
                    },
                  },
                },
              },
              {
                value: 100 - 40,
                name: "invisible",
                tooltip: {
                  show: false,
                },
                itemStyle: {
                  normal: {
                    color: "#1b2d2f",
                  },
                  emphasis: {
                    color: "#1b2d2f",
                  },
                },
              },
            ],
          },
        ],
      },
      gyList: [
        { label: "当日工艺符合率", value: "0", unit: "%" },
        { label: "月累计工艺符合率", value: "0", unit: "%" },
        { label: "年累计工艺符合率", value: "0", unit: "%" },
      ],
      aqList: [
        { label: "职员", value: "123", unit: "人" },
        { label: "自聘作业员", value: "1313", unit: "人" },
        { label: "外包", value: "1313", unit: "人" },
      ],
      qualityList: [
        { label: "克重机合格品个数", value: "", unit: "" },
        { label: "生产总个数", value: "", unit: "" },
      ],
      pkPieOptions: {
        title: titleArr,
        series: seriesArr,
        // tooltip: {
        //   trigger: "item",
        //   formatter: "2021年: {c}人",
        // },
      },
      sbOptions: {
        legend: {
          show: true,
          top: 0,
          icon: "rect",
          right: "0%",
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 40,
          selectedMode: false, // 是否允许点击
          data: ["设备OEE"],
          textStyle: {
            color: "#fefefe",
            fontSize: nowSize(12),
          },
        },

        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          formatter: "{b} <br/>{a0} : {c0} %",
          backgroundColor: "rgba(0,0,0,.9)",
          textStyle: {
            color: "#fff",
          },
        },
        grid: [
          //用于调整X轴以及Y轴的位置
          {
            show: false,
            bottom: "4%",
            left: "8%",
            right: "4%",
            containLabel: true,
            height: "70%",
          },
          {
            show: false,
            top: "88%",
            left: "8%",
            right: "4%",
            height: "0%",
            zlevel: 100,
          },
          {
            show: false,
            top: "18%",
            left: "8%",
            // left: 76,
            right: "4%",
            containLabel: true,
            height: "70%",
          },
        ],
        xAxis: [
          {
            type: "category",
            position: "bottom",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            data: [],
          },
          {
            gridIndex: 1,
            type: "category",
            position: "center",
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(110, 130, 149, 0.30)",
                width: 1,
              },
            },
            axisTick: {
              show: false,
            },
            zlevel: 200,
            axisLabel: {
              show: true,
              align: "center",
              textStyle: {
                color: "#adceea",
                fontSize: nowSize(14),
              },
            },
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          {
            gridIndex: 2,
            type: "category",
            position: "top",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            data: [],
          },
          {
            gridIndex: 2,
            type: "category",
            position: "top",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            data: [],
          },
        ],
        yAxis: [
          {
            type: "value",
            inverse: true, //echarts Y轴翻转属性,
            nameTextStyle: {
              color: "#A1A6AA",
              fontSize: nowSize(14),
            },
            axisLine: {
              show: false,
            },
            position: "left", //位置属性
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#A1A6AA",
                fontSize: nowSize(14),
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(0,162,255,0.08)",
                width: 1,
              },
            },
          },
          {
            gridIndex: 1, //对应的是grid  通过grid设置X Y相对位置
            show: false,
          },
          {
            gridIndex: 2,
            type: "value",
            name: "单位: %",
            position: "left", //双Y轴一个翻转一个不翻转
            axisLine: {
              show: false,
            },
            position: "left", //位置属性
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#A1A6AA",
                fontSize: nowSize(14),
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(0,162,255,0.08)",
                width: 1,
              },
            },
          },
        ],
        series: [
          {
            gridIndex: 0, //选取调整好的轴,调整图形是向上还是向下
            name: "设备OEE",
            type: "bar",
            barWidth: 10,
            data: [],
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#709ED1",
                  },
                  {
                    offset: 1,
                    color: "#0C1E2C",
                  },
                ]),
              },
            },
          },
          // 上面的背景
          {
            gridIndex: 1, //选取调整好的轴,调整图形是向上还是向下
            name: "设备OEE2",
            type: "bar",
            barWidth: 40,
            data: [],
            barGap: "-100%",
            xAxisIndex: 3,
            yAxisIndex: 2,
            itemStyle: {
              normal: {
                color: "rgba(18, 62, 98, 0.35)",
              },
            },

            data: [].map((item) => ({
              itemStyle: {
                decal: {
                  dashArrayX: [20, 0],
                  dashArrayY: [5, 2],
                  rotation: -45,
                },
              },
              value: 100,
            })),
          },

          // {
          //   gridIndex: 2, // 选取调整好的轴,调整图形是向上还是向下
          //   name: "设备基准线",
          //   type: "line",
          //   lineStyle: {
          //     color: "#4c6173",
          //   },
          //   showAllSymbol: true,
          //   showSymbol: true,
          //   symbol:
          //     "image://",
          //   symbolSize: 26,
          //   itemStyle: {
          //     normal: {
          //       color: "rgba(172, 213, 152, 1)",
          //       borderColor: "rgba(172, 213, 152, 1)",
          //       borderWidth: 1,
          //     },
          //   },
          //   data: [],
          // },
          // 下面的背景
          // {
          //   gridIndex: 2, //选取调整好的轴,调整图形是向上还是向下
          //   name: "设备OEE1",
          //   type: "bar",
          //   barWidth: 40,
          //   data: [30, 2, 20, 34, 39, 330, 220],
          //   xAxisIndex: 0,
          //   yAxisIndex: 0,
          //   itemStyle: {
          //     normal: {
          //       color: "rgba(18, 62, 98, 0.35)",
          //     },
          //   },

          //   data: [].map((item) => ({
          //     itemStyle: {
          //       decal: {
          //         dashArrayX: [20, 0],
          //         dashArrayY: [5, 2],
          //         rotation: -45,
          //       },
          //     },
          //     value: 100,
          //   })),
          // },
        ],
      },

      pkOptions: {
        animation: true,
        tooltip: {
          trigger: "axis",
          formatter: "{b} <br/>{a1} : {c1} %<br/> {a2} : {c2} %",
          backgroundColor: "rgba(0,0,0,.9)",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          show: true,
          top: 0,
          icon: "rect",
          right: "0%",
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 50,
          data: ["不良品率", "良品率"],
          textStyle: {
            color: "#fefefe",
            fontSize: nowSize(12),
          },
        },
        grid: {
          left: "5%",
          top: "14%",
          bottom: "2%",
          right: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {},
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(110, 130, 149, 0.30)",
                width: 1,
              },
            },
            axisLabel: {
              textStyle: {
                color: "#adceea",
                fontSize: nowSize(14),
              },
            },
            interval: 1,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位: %",
            nameTextStyle: {
              color: "#A1A6AA",
              fontSize: nowSize(14),
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#A1A6AA",
                fontSize: nowSize(14),
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],

        series: [
          // 背景
          {
            name: "",
            type: "bar",
            barWidth: 40,
            barGap: "-100%",
            itemStyle: {
              normal: {
                color: "rgba(18, 62, 98, 0.35)",
              },
            },
            data: barDate.map((item) => ({
              itemStyle: {
                decal: {
                  dashArrayX: [20, 0],
                  dashArrayY: [5, 2],
                  rotation: -45,
                },
              },
              value: 100,
            })),
            z: -1,
          },
          {
            name: "不良品率",
            type: "line",
            showAllSymbol: true,
            lineStyle: {
              color: "#4c6173",
            },
            showSymbol: true,
            symbol:
              "image://",
            symbolSize: 26,
            itemStyle: {
              normal: {
                color: "#f67b0f",
                borderColor: "#f67b0f",
                borderWidth: 1,
              },
            },
            data: [],
          },
          {
            name: "良品率",
            type: "line",
            showAllSymbol: true,
            lineStyle: {
              color: "#4c6173",
            },
            showSymbol: true,
            symbol:
              "image://",
            symbolSize: 26,
            itemStyle: {
              normal: {
                color: "rgba(172, 213, 152, 1)",
                borderColor: "rgba(172, 213, 152, 1)",
                borderWidth: 1,
              },
            },
            data: [],
          },
        ],
      },
      steamOptions: {
        legend: {
          icon: "rect",
          itemWidth: 9,
          itemHeight: 4,
          itemGap: 16,
          top: 20,
          right: 60,
          textStyle: {
            fontSize: 12,
            color: "#fff",
            fontFamily: "Microsoft YaHei",
          },
        },
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.9)",
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: [],
          axisTick: {
            show: true,
          },
          axisLabel: {
            textStyle: {
              color: "#FEFEFE",
              fontSize: 12,
              fontFamily: "Microsoft YaHei",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "#203044",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#263649",
              width: 1,
              type: "dashed",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#FFFFFF",
              fontSize: 12,
            },
          },
        },
        series: [
          // {
          //   name: "千包",
          //   type: "line",
          //   smooth: true,
          //   symbol: "circle",
          //   symbolSize: 1,
          //   data: [],
          //   lineStyle: {
          //     color: "#C35309",
          //   },
          // },
          {
            name: "蒸汽",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 1,
            data: [],
            itemStyle: {
              normal: {
                color: "#F9D935",
              },
            },
          },
          {
            name: "电",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 1,
            data: [],
            itemStyle: {
              normal: {
                color: "#16D0FF",
              },
            },
          },
          {
            name: "水",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 1,
            data: [],
            itemStyle: {
              normal: {
                color: "#4EE28B",
              },
            },
          },
        ],
      },
      time1: null,
      time2: null,
      time3: null
    };
  },
  computed: {
    throughRate() {
      let result = "";
      const { throughRateDay, throughRateMonth, throughRateYear } = this.quality;
      if (this.selectedDate === "day") {
        result = throughRateDay;
      } else if (this.selectedDate === "month") {
        result = throughRateMonth;
      } else {
        result = throughRateYear;
      }
      return result;
    },
  },
  mounted() {
    // 获取query参数
    this.query = this.$route.query;
    this.init();
  },
  watch: {
    selectedDate(newV, oldV) {
      if (oldV === newV) return;
      if (newV === "day") {
        // 日
        this.qualityList = [
          { label: "克重机合格品个数", value: this.quality.productionDay, unit: "" },
          { label: "生产总个数", value: this.quality.rawProductionDay, unit: "" },
        ];
      } else if (newV === "month") {
        // 月
        this.qualityList = [
          { label: "克重机合格品个数", value: this.quality.productionMonth, unit: "" },
          { label: "生产总个数", value: this.quality.rawProductionMonth, unit: "" },
        ];
      } else {
        // 年
        this.qualityList = [
          { label: "克重机合格品个数", value: this.quality.productionYear, unit: "" },
          { label: "生产总个数", value: this.quality.rawProductionYear, unit: "" },
        ];
      }
    },
  },
  methods: {
    // hui

    init() {
      this.workshopProduction();
      this.workshopPersonnel();
      this.workshopQuality();
      this.workshopWorkday();
      this.workshopDevice();
      this.workshopEnergy();
      this.workshopEnergyUsed();
      this.workshopTendency();
    },

    toMoney(num, isTenThousand) {
      if (!num) return "0";
      if (isNaN(Number(num))) {
        // 如果不是个数字, 去掉,
        num = num.replaceAll(",", "");
      }
      if (isTenThousand) {
        num = +num / 10000;
      }
      if (+num > 9999.999999) return Math.floor(+num).toLocaleString();
      num = Math.floor(+num * 100) / 100;
      num = (+num).toLocaleString();
      let dotIndex = num.indexOf(".");
      if (dotIndex === -1) num = num + "";
      if (dotIndex === num.length - 3) num;
      if (dotIndex === num.length - 2) num = num + "";
      return num;
    },
    /**
     * 生产管理
     * @param name 描述信息
     */
    async workshopProduction() {
      // let { code, data } =
      //   (await workshopProduction({
      //     ...this.query,
      //   }).catch((err) => {
      //     err;
      //   })) || {};
      const date = new Date();

      const hour = (date.getHours() - 7) / 12;
      const day = (date.getDate()) / 31;
      const month = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();

      const code = 200, data = {
        "production": {
          "createBy": null,
          "createTime": null,
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 3,
          "factoryName": "杭州顶益工厂",
          "workshopName": "制面一车间",
          "lineName": null,
          "activeYearOut": "2000",
          "activeMonthlyOut": (day * 433700).toFixed(0),
          "activeDayOut": (202145 * hour).toFixed(0),
          "plannedOutputNumMonth": "400",
          "plannedOutputNum": "500",
          "dailyProductivity": "60",
          "monthlyProductivity": "70",
          "totalhours": "800"
        },
        "quality": {
          "createBy": null,
          "createTime": null,
          "updateBy": null,
          "updateTime": "2023-10-20 18:56:11",
          "remark": null,
          "id": 4,
          "recordDate": null,
          "factoryName": "杭州顶益工厂",
          "workshopName": "制面一车间",
          "lineName": null,
          "throughRateDay": "99.7617",
          "productionDay": "2747710",
          "rawProductionDay": "2754274",
          "throughRateMonth": "99.7758",
          "productionMonth": "104131708",
          "rawProductionMonth": "104480923",
          "throughRateYear": "50",
          "productionYear": "16",
          "rawProductionYear": "400",
          "qualifiedNumber": "200",
          "produceNumber": "200",
          "throughRate": "30"
        }
      };
      if (code === 200) {
        this.production = data.production;
        this.quality = data.quality;

        // 日
        this.qualityList = [
          { label: "克重机合格品个数", value: this.quality.productionDay, unit: "" },
          { label: "生产总个数", value: this.quality.rawProductionDay, unit: "" },
        ];
      }
    },
    /**
     * 人效管理
     * @param name 描述信息
     */
    async workshopPersonnel() {
      // let { code, data } =
      //   (await workshopPersonnel({
      //     ...this.query,
      //   }).catch((err) => {
      //     err;
      //   })) || {};

      const code = 200, data = {
        "personnel": {
          "createBy": null,
          "createTime": null,
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 4,
          "factoryName": "杭州顶益工厂",
          "workshopName": "制面一车间",
          "lineName": null,
          "totalNumber": 324,
          "clerkNumber": 41,
          "securityStaffNumber": 179,
          "outsourceNumber": 104,
          "entryNumber": 49,
          "departNumber": 1
        },
        "totalhours": "0.8"
      };
      if (code === 200) {
        this.personObj = {
          ...data.personnel,
          totalhours: data.totalhours,
        };
        this.aqList = [
          { label: "职员", value: this.personObj.clerkNumber, unit: "人" },
          { label: "自聘作业员", value: this.personObj.securityStaffNumber, unit: "人" },
          { label: "外包", value: this.personObj.outsourceNumber, unit: "人" },
        ];
      }
    },
    /**
     * 品控管理
     * @param name 描述信息
     */
    async workshopQuality() {
      // let { code, data } =
      //   (await workshopQuality({
      //     ...this.query,
      //   }).catch((err) => {
      //     err;
      //   })) || {};
      const dates = getSevenDays();
      const code = 200, data = {
        "productRateList": [
          {
            "createBy": null,
            "createTime": null,
            "updateBy": null,
            "updateTime": "2023-10-06 22:36:04",
            "remark": null,
            "id": 16,
            "recordDate": "2023-10-20",
            "factoryName": "杭州顶益工厂",
            "workshopName": "制面一车间",
            "lineName": null,
            "defect": "432",
            "defectBudget": "698",
            "defectRadio": "0.3",
            "qualifiedRadio": "99.7"
          },
          {
            "createBy": null,
            "createTime": null,
            "updateBy": null,
            "updateTime": "2023-10-06 22:36:17",
            "remark": null,
            "id": 17,
            "recordDate": "2023-10-21",
            "factoryName": "杭州顶益工厂",
            "workshopName": "制面一车间",
            "lineName": null,
            "defect": "900",
            "defectBudget": "1000",
            "defectRadio": "0.28",
            "qualifiedRadio": "99.72"
          },
          {
            "createBy": null,
            "createTime": null,
            "updateBy": null,
            "updateTime": "2023-10-04 14:30:20",
            "remark": null,
            "id": 18,
            "recordDate": "2023-10-22",
            "factoryName": "杭州顶益工厂",
            "workshopName": "制面一车间",
            "lineName": null,
            "defect": "400",
            "defectBudget": "600",
            "defectRadio": "0.32",
            "qualifiedRadio": "99.68"
          },
          {
            "createBy": null,
            "createTime": null,
            "updateBy": null,
            "updateTime": "2023-10-06 22:36:32",
            "remark": null,
            "id": 19,
            "recordDate": "2023-10-23",
            "factoryName": "杭州顶益工厂",
            "workshopName": "制面一车间",
            "lineName": null,
            "defect": "1000",
            "defectBudget": "70",
            "defectRadio": "0.32",
            "qualifiedRadio": "99.68"
          },
          {
            "createBy": null,
            "createTime": null,
            "updateBy": null,
            "updateTime": "2023-10-06 22:36:48",
            "remark": null,
            "id": 20,
            "recordDate": "2023-10-24",
            "factoryName": "杭州顶益工厂",
            "workshopName": "制面一车间",
            "lineName": null,
            "defect": "504",
            "defectBudget": "2000",
            "defectRadio": "0.31",
            "qualifiedRadio": "99.69"
          },
          {
            "createBy": null,
            "createTime": "2023-10-20 15:12:31",
            "updateBy": null,
            "updateTime": "2023-10-20 18:54:59",
            "remark": null,
            "id": 21,
            "recordDate": "2023-10-25",
            "factoryName": "杭州顶益工厂",
            "workshopName": "制面一车间",
            "lineName": null,
            "defect": "0",
            "defectBudget": "0",
            "defectRadio": "0.27",
            "qualifiedRadio": "99.73"
          },
          {
            "createBy": null,
            "createTime": "2023-10-20 15:12:31",
            "updateBy": null,
            "updateTime": "2023-10-20 18:54:59",
            "remark": null,
            "id": 22,
            "recordDate": "2023-10-26",
            "factoryName": "杭州顶益工厂",
            "workshopName": "制面一车间",
            "lineName": null,
            "defect": "0",
            "defectBudget": "0",
            "defectRadio": "0.30",
            "qualifiedRadio": "99.7"
          }
        ],
        "quality": {
          "createBy": null,
          "createTime": null,
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 3,
          "factoryName": "杭州顶益工厂",
          "workshopName": "制面一车间",
          "lineName": null,
          "defectiveNum": "200",
          "firstPassRate": "99",
          "evaluationPassRate": "99",
          "poorCount": "400",
          "processConformityRate": "1275",
          "checkRate": "99",
          "numbeComplaints": "43",
          "complaintRate": "50",
          "grantComplaintRate": "1.1",
          "conformDay": "98.90",
          "conformMonth": "99.30",
          "conformYear": "99.30"
        }
      };
      if (code === 200) {
        this.qualityObj = data;
        let arr = ["firstPassRate", "evaluationPassRate", "checkRate", "grantComplaintRate"];
        this.pkPieOptions.series.forEach((item, index) => {
          item.data[0].value = this.qualityObj.quality[arr[index]];
          item.data[1].value = 100 - this.qualityObj.quality[arr[index]];
        });

        this.gyList = [
          { label: "当日工艺符合率", value: this.qualityObj.quality.conformDay, unit: "%" },
          { label: "月累计工艺符合率", value: this.qualityObj.quality.conformMonth, unit: "%" },
          { label: "年累计工艺符合率", value: this.qualityObj.quality.conformYear, unit: "%" },
        ];

        // 折线图
        let defectRadioArr = this.qualityObj.productRateList.map((item) => item.defectRadio);
        let qualifiedRadioArr = this.qualityObj.productRateList.map((item) => item.qualifiedRadio);

        let max = Math.max(...defectRadioArr, ...qualifiedRadioArr);
        this.pkOptions.xAxis[0].data = dates; // this.qualityObj.productRateList.map((item) => item.recordDate);
        this.pkOptions.series[1].data = defectRadioArr;
        this.pkOptions.series[2].data = qualifiedRadioArr;
        this.pkOptions.series[0].data = defectRadioArr.map((item) => ({
          itemStyle: {
            decal: {
              dashArrayX: [20, 0],
              dashArrayY: [5, 2],
              rotation: -45,
            },
          },
          value: 100,
        }));
      }
    },
    /**
     * 安全
     * @param name 描述信息
     */
    async workshopWorkday() {
      // let { code, data } =
      //   (await workshopWorkday({
      //     ...this.query,
      //   }).catch((err) => {
      //     err;
      //   })) || {};

      const code = 200, data = {
        "createBy": null,
        "createTime": "2023-10-21 20:29:52",
        "updateBy": null,
        "updateTime": "2023-10-21 20:29:52",
        "remark": null,
        "id": 7,
        "factoryName": "杭州顶益工厂",
        "workshopName": "制面一车间",
        "lineName": null,
        "runningDays": new Date().getDate() + 2
      };
      if (code === 200) {
        this.safeObj = data;
      }
    },
    /**
     * 设备管理
     * @param name 描述信息
     */
    async workshopDevice() {
      // let { code, data } =
      //   (await workshopDevice({
      //     ...this.query,
      //   }).catch((err) => {
      //     err;
      //   })) || {};
      const dates = getSevenDays();
      const code = 200, data = {
        "device": {
          "createBy": null,
          "createTime": "2023-10-05 10:15:06",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 3,
          "factoryName": "杭州顶益工厂",
          "workshopName": "制面一车间",
          "lineName": null,
          "devicesAll": "127",
          "devicesNormal": "104",
          "devicesOffline": "0",
          "startupProgress": "88",
          "timeRate": "93.20",
          "performanceRate": "92.50",
          "faultRate": "94.10",
          "setsinuse": "90",
          "guzhRate": "12",
          "faultTime": "50",
          "schedulingTime": "60",
          "exceptionRate": "70",
          "mtbf": "80",
          "mttr": "90",
          "patrolRate": "30"
        },
        "trends": [
          {
            "createBy": null,
            "createTime": "2023-10-03 23:47:59",
            "updateBy": null,
            "updateTime": "2023-10-03 23:48:01",
            "remark": null,
            "id": 8,
            "factoryName": "杭州顶益工厂",
            "workshopName": "制面一车间",
            "lineName": null,
            "recordDate": "2023-10-20",
            "oee": "78.32",
            "baseline": "79"
          },
          {
            "createBy": null,
            "createTime": "2023-10-03 23:44:28",
            "updateBy": null,
            "updateTime": "2023-10-03 23:44:57",
            "remark": null,
            "id": 2,
            "factoryName": "杭州顶益工厂",
            "workshopName": "制面一车间",
            "lineName": null,
            "recordDate": "2023-10-21",
            "oee": "78.65",
            "baseline": "79"
          },
          {
            "createBy": null,
            "createTime": "2023-10-03 23:44:28",
            "updateBy": null,
            "updateTime": "2023-10-03 23:44:57",
            "remark": null,
            "id": 3,
            "factoryName": "杭州顶益工厂",
            "workshopName": "制面一车间",
            "lineName": null,
            "recordDate": "2023-10-22",
            "oee": "79.01",
            "baseline": "79"
          },
          {
            "createBy": null,
            "createTime": "2023-10-03 23:44:28",
            "updateBy": null,
            "updateTime": "2023-10-03 23:44:57",
            "remark": null,
            "id": 4,
            "factoryName": "杭州顶益工厂",
            "workshopName": "制面一车间",
            "lineName": null,
            "recordDate": "2023-10-23",
            "oee": "79.24",
            "baseline": "79"
          },
          {
            "createBy": null,
            "createTime": "2023-10-03 23:44:28",
            "updateBy": null,
            "updateTime": "2023-10-03 23:44:57",
            "remark": null,
            "id": 5,
            "factoryName": "杭州顶益工厂",
            "workshopName": "制面一车间",
            "lineName": null,
            "recordDate": "2023-10-24",
            "oee": "80.12",
            "baseline": "79"
          },
          {
            "createBy": null,
            "createTime": "2023-10-03 23:44:28",
            "updateBy": null,
            "updateTime": "2023-10-03 23:44:57",
            "remark": null,
            "id": 6,
            "factoryName": "杭州顶益工厂",
            "workshopName": "制面一车间",
            "lineName": null,
            "recordDate": "2023-10-25",
            "oee": "79.59",
            "baseline": "79"
          },
          {
            "createBy": null,
            "createTime": "2023-10-03 23:44:28",
            "updateBy": null,
            "updateTime": "2023-10-03 23:44:57",
            "remark": null,
            "id": 6,
            "factoryName": "杭州顶益工厂",
            "workshopName": "制面一车间",
            "lineName": null,
            "recordDate": "2023-10-26",
            "oee": "80.55",
            "baseline": "79"
          }
        ]
      };
      if (code === 200) {
        this.sbObj = data;
        const fun1 = () => {
          this.$set(this.sbObj, 'timeRate', getRangeRandomFloor(93.0, 94.0, 2));
          this.$set(this.sbObj, 'performanceRate', getRangeRandomFloor(92.0, 93.0, 2));
          this.$set(this.sbObj, 'faultRate', getRangeRandomFloor(94.0, 95.0, 2));
        }
        if (this.time3) clearInterval(this.time3);
        this.time3 = setInterval(() => { fun1() }, 1000 * 60);

        this.sbPieOptions.series[0].data[0].value = data.device.timeRate;
        this.sbPieOptions.series[0].data[1].value = 100 - data.device.timeRate;
        this.sbPieOptions.series[1].data[0].value = data.device.performanceRate;
        this.sbPieOptions.series[1].data[1].value = 100 - data.device.performanceRate;
        this.sbPieOptions.series[2].data[0].value = data.device.faultRate;
        this.sbPieOptions.series[2].data[1].value = 100 - data.device.faultRate;

        let oeeArr = data.trends.map((item) => item.oee);
        let xArr = dates //data.trends.map((item) => item.recordDate);
        let baselineArr = data.trends.map((item) => item.baseline);
        let oeeMax = Math.max(...oeeArr);
        let baselineMin = Math.min(...baselineArr);

        this.sbOptions.xAxis[0].data = xArr;
        this.sbOptions.xAxis[1].data = xArr;
        this.sbOptions.xAxis[2].data = xArr;
        this.sbOptions.xAxis[3].data = xArr;
        this.sbOptions.series[0].data = oeeArr;
        // this.sbOptions.series[2].data = baselineArr;

        this.sbOptions.series[1].data = oeeArr.map((item) => ({
          itemStyle: {
            decal: {
              dashArrayX: [20, 0],
              dashArrayY: [5, 2],
              rotation: -45,
            },
          },
          value: 100,
        }));
        // this.sbOptions.series[3].data = oeeArr.map((item) => ({
        //   itemStyle: {
        //     decal: {
        //       dashArrayX: [20, 0],
        //       dashArrayY: [5, 2],
        //       rotation: -45,
        //     },
        //   },
        //   value: 100,
        // }));
      }
    },
    /**
     * 能源管理
     * @param name 描述信息
     */
    async workshopEnergy() {
      // let { code, data } =
      //   (await workshopEnergy({
      //     ...this.query,
      //   }).catch((err) => {
      //     err;
      //   })) || {};

      const code = 200, data = {
        "energy": {
          "createBy": null,
          "createTime": null,
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "energyId": 1,
          "workshopWaterConsumption": "300",
          "workshopPowerConsumption": "1000",
          "workshopStreamConsumption": "2000",
          "factoryName": "杭州顶益工厂",
          "workshopName": "制面一车间",
          "lineName": null,
          "lineWaterConsumption": "4000",
          "linePowerConsumption": "5000",
          "lineStreamConsumption": "6000"
        }
      };
      if (code === 200) {
        this.energyObj = data.energy;
        if (this.time1) clearInterval(this.time1);

        const fun1 = () => {
          const num = Number((Math.random() * (145.8 - 141.6) + 141.6).toString().match(/^\d+(?:\.\d{0,1})?/));
          const num1 = Number((Math.random() * (24.8 - 23.8) + 23.8).toString().match(/^\d+(?:\.\d{0,1})?/));
          const num2 = Number((Math.random() * (286.1 - 190.7) + 190.7).toString().match(/^\d+(?:\.\d{0,1})?/));

          this.$set(this.energyObj, 'workshopWaterConsumption', num);
          this.$set(this.energyObj, 'workshopPowerConsumption', num1)
          this.$set(this.energyObj, 'workshopStreamConsumption', num2)

          const num3 = Number((Math.random() * (145.8 - 141.6) + 141.6).toString().match(/^\d+(?:\.\d{0,1})?/));
          const num4 = Number((Math.random() * (24.8 - 23.8) + 23.8).toString().match(/^\d+(?:\.\d{0,1})?/));
          const num5 = Number((Math.random() * (286.1 - 190.7) + 190.7).toString().match(/^\d+(?:\.\d{0,1})?/));

          this.$set(this.energyObj, 'lineWaterConsumption', num3);
          this.$set(this.energyObj, 'linePowerConsumption', num4)
          this.$set(this.energyObj, 'lineStreamConsumption', num5)
        }
        fun1();
        this.time1 = setInterval(() => { fun1(); }, 1000 * 60 * 3);
      }
    },
    /**
     * 能耗
     * @param name 描述信息
     */
    async workshopEnergyUsed() {
      // let { code, data } =
      //   (await workshopEnergyUsed({
      //     ...this.query,
      //   }).catch((err) => {
      //     err;
      //   })) || {};

      const code = 200, data = {
        "createBy": null,
        "createTime": "2023-10-04 00:00:00",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "id": 2,
        "factory": "杭州顶益工厂",
        "materialType": null,
        "waterUsed": "4.16",
        "waterUsedThousand": "66",
        "elecUsed": "1263",
        "elecUsedThousand": "84.4",
        "steamUsedThousand": "132.5",
        "steamUsed": "763",
        "workshopName": "制面一车间",
        "lineName": null,
        "isDel": "0"
      };
      if (code === 200) {
        this.nhObj = data;
        if (this.time2) clearInterval(this.time2);

        const fun1 = () => {
          const num = getRangeRandomFloor(1.51, 1.63, 2);
          const num1 = getRangeRandom(260, 290);
          const num2 = getRangeRandomFloor(3.10, 3.49, 2);

          this.$set(this.nhObj, 'steamUsed', num);
          this.$set(this.nhObj, 'elecUsed', num1)
          this.$set(this.nhObj, 'waterUsed', num2)

          const num3 = getRangeRandomFloor(1.51, 1.63, 2);
          const num4 = getRangeRandom(260, 290);
          const num5 = getRangeRandomFloor(3.10, 3.49, 2);

          this.$set(this.nhObj, 'steamUsedThousand', num3);
          this.$set(this.nhObj, 'elecUsedThousand', num4)
          this.$set(this.nhObj, 'waterUsedThousand', num5)
        }
        fun1();
        this.time2 = setInterval(() => { fun1(); }, 1000 * 60 * 3);
      }
    },
    /**
     * 能耗趋势
     * @param name 描述信息
     */
    async workshopTendency() {
      // let { code, data } =
      //   (await workshopTendency({
      //     ...this.query,
      //   }).catch((err) => {
      //     err;
      //   })) || {};
      const dates = getSevenDays();
      const code = 200;
      const data = [
            {
            "createBy": "1",
            "createTime": "2023-10-18",
            "updateBy": null,
            "updateTime": null,
            "remark": null,
            "id": 31,
            "factoryName": "杭州顶益工厂",
            "workshopName": "制面一车间",
            "lineName": null,
            "materialType": null,
            "energyUsedThousand": "22",
            "waterUsed": 3.34,
            "elecUsed": 274,
            "steamUsed": 1.57,
            "isDel": "0"
            },
            {
            "createBy": "1",
            "createTime": "2023-10-19",
            "updateBy": null,
            "updateTime": null,
            "remark": null,
            "id": 31,
            "factoryName": "杭州顶益工厂",
            "workshopName": "制面一车间",
            "lineName": null,
            "materialType": null,
            "energyUsedThousand": "22",
            "waterUsed": 3.44,
            "elecUsed": 269,
            "steamUsed": 1.53,
            "isDel": "0"
            },
            {
            "createBy": "1",
            "createTime": "2023-10-20",
            "updateBy": null,
            "updateTime": null,
            "remark": null,
            "id": 31,
            "factoryName": "杭州顶益工厂",
            "workshopName": "制面一车间",
            "lineName": null,
            "materialType": null,
            "energyUsedThousand": "22",
            "waterUsed": 3.47,
            "elecUsed": 276,
            "steamUsed": 1.58,
            "isDel": "0"
            },
            {
            "createBy": "1",
            "createTime": "2023-10-21",
            "updateBy": null,
            "updateTime": null,
            "remark": null,
            "id": 31,
            "factoryName": "杭州顶益工厂",
            "workshopName": "制面一车间",
            "lineName": null,
            "materialType": null,
            "energyUsedThousand": "22",
            "waterUsed": 3.13,
            "elecUsed": 261,
            "steamUsed": 1.57,
            "isDel": "0"
            },
            {
            "createBy": "1",
            "createTime": "2023-10-22",
            "updateBy": null,
            "updateTime": null,
            "remark": null,
            "id": 31,
            "factoryName": "杭州顶益工厂",
            "workshopName": "制面一车间",
            "lineName": null,
            "materialType": null,
            "energyUsedThousand": "22",
            "waterUsed": 3.29,
            "elecUsed": 271,
            "steamUsed": 1.55,
            "isDel": "0"
            },
            {
            "createBy": "1",
            "createTime": "2023-10-23",
            "updateBy": null,
            "updateTime": null,
            "remark": null,
            "id": 31,
            "factoryName": "杭州顶益工厂",
            "workshopName": "制面一车间",
            "lineName": null,
            "materialType": null,
            "energyUsedThousand": "22",
            "waterUsed": 3.4,
            "elecUsed": 282,
            "steamUsed": 1.58,
            "isDel": "0"
            },
            {
            "createBy": "1",
            "createTime": "2023-10-24",
            "updateBy": null,
            "updateTime": null,
            "remark": null,
            "id": 31,
            "factoryName": "杭州顶益工厂",
            "workshopName": "制面一车间",
            "lineName": null,
            "materialType": null,
            "energyUsedThousand": "22",
            "waterUsed": 3.32,
            "elecUsed": 277,
            "steamUsed": 1.51,
            "isDel": "0"
            }
            ]

      if (code === 200) {
        this.steamOptions.xAxis.data = dates //data.map((item) => item.createTime);
        this.steamOptions.series[0].data = data.map((item) => item.steamUsed);
        this.steamOptions.series[1].data = data.map((item) => item.elecUsed);
        this.steamOptions.series[2].data = data.map((item) => item.waterUsed);

        // this.steamOptions.series[0].data = data.map((item) => item.energyUsedThousand);
        // this.steamOptions.series[1].data = data.map((item) => item.steamUsed);
        // this.steamOptions.series[2].data = data.map((item) => item.steamUsed);
        // this.steamOptions.series[3].data = data.map((item) => item.waterUsed);
      }
    },
  },
  beforeDestroy() {
    if (this.time1) clearInterval(this.time1);
    if (this.time2) clearInterval(this.time2);
    if (this.time3) clearInterval(this.time3);
  }
};
</script>

<style scoped lang="scss">
// jui

.quality-management {
  padding: 0 20px;
  display: flex;
  align-items: center;

  ::v-deep {
    .title-con {
      width: 106px;
    }
  }

  .value {
    position: relative;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 136px;
    height: 136px;
    background-size: 100%;

    span:nth-child(2) {
      font-size: 28px;
      color: #fff;
    }

    .unit {
      font-size: 20px;
      font-family: Microsoft YaHei;
      color: #ffffff;
      opacity: 0.53;
    }

    img {
      position: absolute;
      z-index: -10;
      width: 100%;
    }
  }
}

.workshopManagement {
  background-color: rgba(5, 31, 65, 0.8);

  .arrow {
    position: absolute;
    left: 18px;
    top: 20px;
    width: 17px;
    height: 18px;
    margin: auto;
    bottom: 0;
  }
}

.production-top {
  padding: 20px;
  text-align: center;

  .data {
    margin-right: 30px;
  }

  .value {
    font-size: 18px;
  }

  .label {
    font-size: 14px;
    color: #7bbff2;
  }

  .top {
    padding-bottom: 5px;
    position: relative;

    &::after {
      position: absolute;
      content: "";
      left: "50%";
      transform: translate(-50%);
      bottom: -3px;
      width: 43px;
      height: 2px;
      background: linear-gradient(244deg, rgba(42, 67, 86, 0) 0%, rgba(42, 67, 86, 1) 50%, rgba(42, 67, 86, 0) 100%);
    }
  }

  .bottom {
    padding-top: 5px;
  }

  .data-right {
    .label {
      color: #4ee38c;
    }
  }
}

.bg-text {
  background: url("~@/assets/images/yqzjl_icon_sydk.png") no-repeat;
  background-size: 100% 100%;
}

.font-num {
  font-weight: bold;
  font-style: italic;
  background-image: -webkit-linear-gradient(bottom, #ffffff, #14a9ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-linear {
  background: linear-gradient(179deg, rgba(112, 163, 239, 0.77) 0%, rgba(255, 255, 255, 0.77) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  font-style: italic;
}

.bg-fh {
  .icon {
    position: relative;
  }

  .rotate-fast {
    width: 117px;
    height: 117px;
  }

  .img-item {
    position: absolute;
    z-index: 999;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    width: 71px;
    height: 71px;
  }
}

.center-arr {
  transform: rotate(45deg);
  transform-origin: right bottom;
  left: 12px !important;
}

.right-arr {
  transform: rotate(90deg);
  transform-origin: right bottom;
  left: 8px !important;
}

.bar-progress-small {
  ::v-deep {
    .bar-progree-content {
      transform: scale(0.8);
    }
  }
}

.bgline {
  background: linear-gradient(-90deg, #7bbff2, #ffffff);
}

.flex-s-0 {
  flex-shrink: 0;
}

.energy {
  .item {
    text-align: center;
    width: 33.33%;

    &:not(:last-child)::after {
      position: absolute;
      content: "";
      right: 0;
      top: 50%;
      transform: translateY(-70%);
      width: 1px;
      height: 34px;
      background: #90e5ef;
      opacity: 0.2;
    }
  }
}

.sm-icon {
  width: 15px;
  height: 18px;
  vertical-align: middle;
}

.product-item {
  width: 50%;
}
</style>
